<template>
    <div >
        <div v-if="data.video.using" >
            <dont-support-message :type="type"/>
        </div>
        <div v-else-if="data.singleImg.using && !data.singleImg.src">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.carousel.using && !data.carousel.src[0]">
            <dont-choose-media/>
        </div>
        <div v-else >
            <div class="ad-wraper">
                <div class="ad-container">
                    <div class="ad-body">
                        <div class="ad-header">
                            <img class="ad-head-img" :src="data.userInfo.headImg" alt="img">
                            <div class="ad-head-con">
                                <div class="ad-user-name">{{data.userInfo.name}}</div>
                                <div class="ad-user-support">赞助内容</div>
                            </div>
                        </div>
                        <div v-show="data.adText != ''" class="ad-text">{{data.adText}}</div>
                        <div v-if="data.singleImg.using" class="ad-body-con">
                            <div class="ad-single-img">
                                <img :src="data.singleImg.src" alt="img">
                            </div>
                            <div class="ad-info">
                                <div>
                                    <div class="lfloat">{{singleImgLink}}</div>
                                    <div v-show="data.singleImg.actionCall != '无按钮' && data.singleImg.actionCall != ''" class="rfloat">{{data.singleImg.actionCall}}</div>
                                </div>
                            </div>
                        </div>
                        <div v-else class="ad-body-con">
                            <div class="ad-carousel-img">
                                <img :src="data.carousel.src[0]" alt="img">
                                <img :src="data.carousel.src[1]" alt="img">
                            </div>
                            <div class="ad-info">
                                <div>
                                    <div class="lfloat">{{carouselLink}}</div>
                                    <div v-show="data.carousel.actionCall != '无按钮' && data.carousel.imageInfo.actionCall != ''" class="rfloat">{{data.carousel.imageInfo.actionCall}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ad-footer">
                <div class="ad-tip1">Audience Network 的广告将显示在第三方移动应用和移动网站中。</div>
                <div class="ad-tip2">请注意，这只是预览。广告在其他应用和网站可能有不同显示。</div>
            </div>
        </div>
    </div>

</template>

<script>
    import Vue from 'vue'
    import DontSupportMessage from '~components/ad-preview/dont-support-message.vue'
    import DontChooseMedia from '~components/ad-preview/dont-choose-media.vue'

    export default {
        components: {
            DontSupportMessage,
            DontChooseMedia,
        },
        props: {
            'data': {
                default: {}
            }
        },
        data (){
            return {
                type:'Audience Network 原生广告',
            }
        },
        computed: {

            singleImgLink: function () {
                if(this.data.showLink) {
                    return this.data.showLink.toUpperCase()
                }else if(this.data.singleImg.link) {
                    return this.data.singleImg.link.toUpperCase()
                }else{
                    return 'displayurl.com'.toUpperCase()
                }
            },
            carouselLink: function () {
                if(this.data.showLink) {
                    return this.data.showLink.toUpperCase()
                }else if(this.data.carousel.imageInfo) {
                    return this.data.carousel.imageInfo[0].link.toUpperCase()
                }else{
                    return 'displayurl.com'.toUpperCase()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .ad-wraper{
        background-image: url('~assets/img/ad-native-bg.png');
        background-repeat: no-repeat;
        background-size: contain;
        height: 417px;
        margin: 0 auto;
        position: relative;
        width: 208px;
    }
    .ad-container{
        box-sizing: border-box;
        padding: 240px 24px;
        transform: scale(.50);
        transform-origin: 0 0;
        width: 416px;
    }
    .ad-body{
        border: 1px solid #4b4f56;
        background-color: #fff;
        padding: 9px;
    }
    .ad-header{
        zoom: 1;
    }
    .ad-head-img{
        width: 34px;
        float: left;
        margin-right: 5px;
        border: 0;
    }
    .ad-head-con{
        overflow: hidden;
    }
    .ad-user-name{
        color: #444;
        font-size: 14px;
        font-weight: bold;
        line-height: 16px;
        margin-bottom: 2px;
        max-height: 32px;
        overflow: hidden;
    }
    .ad-user-support{
        color: gray;
        font-size: 13px;
        line-height: 15px;
    }
    .ad-text{
        -webkit-box-orient: vertical;
        color: #333;
        display: -webkit-box;
        font-size: 16px;
        font-weight: normal;
        line-height: 17px;
        margin: 9px 0 9px;
        max-height: 52px;
        overflow: hidden;
    }
    .ad-single-img{
        background-color: #f6f7f9;
        border: 1px solid #ccc;
        margin: 8px 0 0;
        img{
            display: block;
            height: auto;
            max-height: 180px;
            width: 100%;
            border: 0;
        }
    }
    .ad-carousel-img{
        background-color: #f6f7f9;
        border: 1px solid #ccc;
        margin: 8px 0 0;
        overflow: hidden;
        img{
            float: left;
            width: 50%;
            height: 173px;
            border: 0;
        }
    }
    .ad-info{
        border: 1px solid #ccc;
        border-top: none;
        padding: 9px;
        div{
            zoom: 1;
            overflow: hidden;
        }
        .lfloat{
            float: left;
            color: gray;
            font-size: 13px;
            line-height: 15px;
        }
        .rfloat{
            float: right;
            font-weight: bold;
            padding: 0 10px;
            height: 32px;
            border: 1px solid #ccc;
            background-image: url('~assets/img/ad-native-btn-bg.png');
            background-repeat: repeat-x;
            line-height: 32px;
        }
    }
    .ad-footer{
        margin: 0 auto;
        text-align: center;
        width: 250px;
        color: #999;
        font-size: 11px;
        padding-left: 5px;
        line-height: 16px;
    }
    .ad-tip1{
        margin: 12px 0;
        font-weight: bold;
    }
    .ad-tip2{
        margin: 12px 0;
    }
</style>